<template>
    <div>
        <el-card class="box-card" shadow="never">
            <!--导航栏-->
            <el-page-header @back="back" :content="content">
            </el-page-header>
            <el-form ref="form" class="edit-el-form" label-position="right" size="small" :model="form" :rules="rules" label-width="auto">
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="所属社区" prop="c_id">
                        <el-select v-model="form.c_id" @change="handleComChange" placeholder="请选择社区">
                            <el-option
                                    v-for="item in basic_data"
                                    :key="item.c_id"
                                    :label="item.c_name"
                                    :value="item.c_id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="所属网格" prop="g_id">
                        <el-select v-model="form.g_id" placeholder="请选择网格">
                            <el-option
                                    v-for="item in allgridlist"
                                    :key="item.g_id"
                                    :label="item.g_name"
                                    :value="item.g_id">
                            </el-option>
                         </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col>
                    <el-form-item label="小区名称" prop="h_name">
                        <el-input v-model="form.h_name" required></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="住户数" prop="households_num">
                        <el-input v-model="form.households_num" required>
                          <template slot="append">户</template>
                        </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="居民人数" prop="resident_num">
                        <el-input v-model="form.resident_num">
                          <template slot="append">人</template>
                        </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="楼栋数" prop="building_num">
                        <el-input v-model.number="form.building_num">
                          <template slot="append">栋</template>
                        </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="车棚数" prop="carport_num">
                        <el-input v-model="form.carport_num">
                          <template slot="append">个</template>
                        </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="文体活动场所" prop="active_place">
                        <el-input v-model="form.active_place">
                        </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="健身器材" prop="fit_machine">
                        <el-input v-model="form.fit_machine">
                        </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                      <el-form-item label="防火设施" prop="defire_machine">
                          <el-input v-model="form.defire_machine"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                      <el-form-item label="防盗措施" prop="desteal_machine">
                          <el-input v-model="form.desteal_machine">
                          </el-input>
                      </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                    <el-form-item label="卫生设施情况" prop="clean_machine_remark">
                        <el-input v-model="form.clean_machine_remark"  type="textarea"  :rows="2"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="宣传设施情况" prop="advertise_machine_remark">
                        <el-input v-model="form.advertise_machine_remark"  type="textarea"  :rows="2"></el-input>
                    </el-form-item>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="清扫人数" prop="cleaner">
                        <el-input v-model="form.cleaner">
                          <template slot="append">人</template>
                        </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="是否有社区警务室" prop="has_police_room">
                          <el-radio v-model="form.has_police_room" border label="0">否</el-radio>
                          <el-radio v-model="form.has_police_room" border label="1">是</el-radio>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="是否有值班室" prop="has_duty_room">
                        <el-radio v-model="form.has_duty_room" border label="0">否</el-radio>
                        <el-radio v-model="form.has_duty_room" border label="1">是</el-radio>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="电子监控安装情况" prop="e_monitor_install">
                          <el-radio v-model="form.e_monitor_install" border label="0">未安装</el-radio>
                          <el-radio v-model="form.e_monitor_install" border label="1">已安装</el-radio>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="封闭情况" prop="close_remark">
                          <el-radio v-model="form.close_remark" border label="0">全封闭</el-radio>
                          <el-radio v-model="form.close_remark" border label="1">半封闭</el-radio>
                          <el-radio v-model="form.close_remark" border label="2">全开放</el-radio>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="治安乱点" prop="danger_place">
                          <el-radio v-model="form.danger_place" border label="0">否</el-radio>
                          <el-radio v-model="form.danger_place" border label="1">是</el-radio>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="物业公司名称" prop="property_company">
                        <el-input v-model="form.property_company">
                        </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="物业负责人" prop="property_company_master">
                        <el-input v-model="form.property_company_master">
                        </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter='12'>
                  <el-col :span='11'>
                    <el-form-item label="负责人电话" prop="contact_tel">
                        <el-input v-model="form.contact_tel"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span='11'>
                    <el-form-item label="保安人数" prop="protecter_num">
                        <el-input v-model="form.protecter_num">
                            <template slot="append">位</template>
                        </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!--查看不展示按钮-->
                <el-form-item v-if="edit_type!=0">
                    <el-button type="primary" @click="submitForm('form')" :loading="loading">{{button_name}}</el-button>
                    <el-button @click="back">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
    export default {
        name:'HouseEdit',
        data() {
            let validateInt=(rule,value,callback)=>{
               if(value==''){
                  callback();
               }
               let int_reg=/^([0-9]{1,})$/;
               let int_arr={
                  households_num:'住户数',
                  resident_num:'居民人数',
                  carport_num:'车棚数',
                  cleaner:'清扫人数',
                  protecter_num:'保安人数'
               };
               let rule_name=int_arr[rule.field];
               if(!int_reg.test(value)){
                  callback(new Error(rule_name+'必须为数字'));
               }else{
                  callback();
               }
            }
            return {
                form: {
                    c_id:'',
                    g_id:'',
                    h_name: '',
                    households_num:'',
                    resident_num:'',
                    building_num:'',
                    carport_num:'',
                    active_place:'',
                    fit_machine:'',
                    defire_machine:'',
                    desteal_machine:'',
                    clean_machine_remark:'',
                    advertise_machine_remark:'',
                    cleaner:'',
                    has_police_room:'1',
                    has_duty_room:'1',
                    e_monitor_install:'1',
                    close_remark:'1',
                    danger_place:'0',
                    property_company:'',
                    property_company_master:'',
                    contact_tel:'',
                    protecter_num:'',
                },
                //校验规则
                rules:{
                    h_name: [
                        { required:true , message:'请输入小区名称',trigger:'blur' }
                    ],
                    c_id:[
                        { required:true , message:'请选择所属社区'}
                    ],
                    g_id:[
                        { required:true , message:'请选择所属网格'}
                    ],
                    households_num:[
                        { required:false , validator:validateInt }
                    ],
                    resident_num:[
                        { required:false , validator:validateInt }
                    ],
                    carport_num:[
                        { required:false , validator:validateInt }
                    ],
                    building_num:[
                        { required:true , message:'请输入楼栋数'},
                        { type:'number', message:'楼栋数必须为数字'}
                    ],
                    cleaner:[
                        { required:false , validator:validateInt }
                    ],
                    property_company:[
                        { required:true , message:'请输入物业公司名称'},
                    ],
                    property_company_master:[
                        { required:true , message:'请输入物业负责人'},
                    ],
                    protecter_num:[
                        { required:false , validator:validateInt }
                    ]
                },
                //加载组件
                loading: false,
                button_name:'立即提交',
                content:'房屋添加',
                allgridlist:[]    //网格列表
            }
        },
        methods: {
            submitForm(formName){
                let that = this;
                    this.$refs[formName].validate((valid) => {
                            if (valid) {
                                this.loading=true;
                                this.button_name='正在提交';
                                var send_data={
                                    api_token:this.$store.getters.getSessionId,
                                };
                                //写入表单内容
                                for(let item in this.form){
                                    send_data[item]=this.form[item];
                                }
                                if(this.id!=-1){
                                    send_data.id=this.id;
                                }
                                this.$store.dispatch('editHouse',send_data);
                            }else{
                                setTimeout(()=>{
                                  const is_error=document.getElementsByClassName('is-error');
                                  is_error[0].querySelector('input').focus();
                                },100);
                                return false;
                            }
                    })
            },
            back(){
                console.log('back');
                this.$router.push({
                   name:'houselist',
                   query:{
                     g_id:this.$store.getters.getCurrentGId
                   }
                });
            },
            handleComChange(c_id){
                this.form.g_id='';
                this.getGridList(c_id);
            },
            getGridList(c_id){
              for(let i=0;i<this.basic_data.length;i++){
                  if(c_id==this.basic_data[i]['c_id']){
                    this.allgridlist=this.basic_data[i]['children'];
                    break;
                  }
              }
            }
        },
        created(){
            //先查询社区网格下拉框
            let send_data={
               api_token:this.$store.getters.getSessionId
            };
            this.$store.dispatch('loadBasicData',send_data);
            //修改标题
            if(this.edit_type==1){
                this.content='房屋添加';
            }else if(this.edit_type==0){
                this.content='房屋详情';
            }else if(this.edit_type==2){
                this.content='房屋编辑';
            }
        },
        computed:{
            editHouseStatus(){
                return this.$store.getters.getEditHouseStatus;
            },
            houseinfo(){
                return this.$store.getters.getHouseInfo;
            },
            id(){
                return this.$route.params.id;
            },
            //是否可编辑
            edit_type(){
                return this.$route.params.edit_type;
            },
            basic_data(){
               return this.$store.getters.getBasicData;
            }
        },
        watch:{
            editHouseStatus(val){
                let that=this;
                if(val==1){
                    //按钮置为失效
                    this.$message({
                        message:this.content+'成功',
                        type:'success',
                        duration:1000,
                        onClose:function(e){
                            that.loading=false;
                            that.$store.commit('setEditHouseStatus',-1);
                            that.$router.push({
                               name:'houselist',
                               query:{
                                 g_id:that.$store.getters.getCurrentGId
                               }
                            });
                        }
                    });
                }else{
                    this.$message({
                        message:this.content+'失败',
                        type:'error',
                        duration:2000
                    });
                    that.loading=false;
                    that.button_name='立即提交';
                    //初始化状态
                    that.$store.commit('setEditHouseStatus',-1);
                }
            },
            //加载到数据之后
            houseinfo(val){
              let number_arr={
                  households_num:1,
                  resident_num:1,
                  building_num:1,
                  carport_num:1,
                  cleaner:1,
                  protecter_num:1
              };
              let radio_arr={
                  has_police_room:1,
                  has_duty_room:1,
                  e_monitor_install:1,
                  close_remark:1,
                  danger_place:1,
              };
              if(val.c_id>0){
                this.getGridList(val.c_id);
              }
              for(let item in this.form){
                if(number_arr[item]==1){
                  this.form[item]=val[item]==0?'':val[item];
                }else if(radio_arr[item]==1){
                  this.form[item]=val[item].toString();
                }else{
                  this.form[item]=val[item];
                }
              }
            },
            basic_data(val){
               if(this.id!=-1){
                   var send_data={
                       api_token:this.$store.getters.getSessionId,
                       id:this.id
                   }
                   this.$store.dispatch('loadHouseInfo',send_data);
               }
            }
        }
    }
</script>

<style>
    .edit-el-form{
        margin-top:30px;
    }
</style>
